<template>
	<div class="w750" :class="Nomsg ? 'white-bg' : ''">
		<!-- 头部 -->
		<header>
			<div class="header-box">
				<div class="header-back" @click="goback">
					<span class="back-img"><img src="../../assets/images/back.png" alt=""/></span>
				</div>
				<div class="header-search"><p class="ser-txt">我的足迹</p></div>
				<div class="header-mes" @click="clearFoot"><span class="mes-txt">清空</span></div>
			</div>
		</header>
		<!-- /头部 -->
		<!-- 我的足迹 -->
		<div class="collection" :class="themes.theme">
			<div class="collection-list" v-if="respondResultList && respondResultList.length">
				<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
					<div class="item" v-for="(item, index) in respondResultList" @click="goGoodsDetail(item.prodId)" :key="index">
						<div class="pro-mes">
							<div class="pro-img" v-if="item.pic != null"><img :src="$imgUrlHead + item.pic" alt=""/></div>
							<div class="pro-img" v-else><img src="../../assets/images/default-goods-img.jpg" alt=""/></div>
							<div class="pro-name">
								<div class="name">{{ item.prodName }}</div>
								<div class="pro-price">
									<span class="price">
										￥
										<em class="now">{{ Money(item.price)[0] }}</em>
										.{{ Money(item.price)[1] }}
									</span>
								</div>
							</div>
							<div class="pro-date">{{ item.recDate | dateformat('YYYY-MM-DD') }}</div>
						</div>
					</div>
				</van-list>
			</div>

			<div class="collection-list" v-if="Nomsg"><Noempty :pic="require('../../assets/images/history-empty.png')" :title="'您还没有浏览过商品'" /></div>
		</div>
		<!-- /我的足迹 -->
	</div>
</template>

<script>
import { List } from 'vant';
import Noempty from 'components/Noempty/Noempty';
import cash from 'utils/tool';
import {mapState} from 'vuex'
import { history, clearHistory } from 'api/history';
export default {
	data() {
		return {
        	 
			Money: cash, //价格转换
			Nomsg: false, //是否显示空白页，true:显示空白页，false：不显示空白页
			finished: false, //加载动作
			loading: false, //是否加载，true:允许下拉加载，false：不允许下拉加载
			requestParams: { curPageNO: 1 }, // 请求参数
			respondResultList: [], //响应参数(存放res.result.resultList数据)
			total: '' //响应参数(存放res.result.total数据)
		};
	},
	mounted() {
		let that = this;

		this._getData(false);
	},
	methods: {
		//下拉加载
		onLoad() {
			setTimeout(() => {
				if (pageUtils.isMore(this.respondResultList, this.respondResultList.length, this.total)) {
					this.requestParams.curPageNO++;
					this._getData(true);
				} else {
					this.loading = false;
					this.finished = true;
				}
			}, 500);
		},

		/**
		 * 封装的从接口处获取数据的私有方法，须要获取数据时触发该方法
		 * @param {*} isAppend 是否已经加载过，true：已经加载过，false：第一次加载
		 */
		_getData(isAppend) {
			this.loading = true;
			history(this.requestParams).then(res => {
					//1.传输参数
					let data = {
						isAppend: isAppend, //是否已经加载过，true：已经加载过，false：第一次加载
						loading: this.loading,
						Nomsg: this.Nomsg,
						res: res, //接口的res
						respondResultList: this.respondResultList, //响应参数(存放res.result.resultList数据)
						total: this.total //响应参数(存放res.result.total数据)
					};
					//2.处理参数
					pageUtils.processData(data);
					//3.接收参数
					this.respondResultList = data.respondResultList;
					this.total = data.total;
					this.loading = data.loading;
					this.Nomsg = data.Nomsg;
				})
				.finally(() => {
					this.loading = false;
				});
		},

		//返回
		goback() {
			this.$router.back();
			this.$router.isBack = true;
		},

		//去商品详情
		goGoodsDetail(prodId) {
			this.$router.push({
				path: `/goodsDetail`,
				query: {
					goodsInfoId: prodId
				}
			});
		},

		//清空足迹
		clearFoot() {
			if (this.respondResultList.length) {
				this.$dialog
					.confirm({
						title: '清空足迹',
						message: '您确定要清空足迹吗？'
					})
					.then(() => {
						clearHistory().then(res => {
							if (res.status == 1) {
								history().then(res => {
									if (res.status == 1) {
										this.respondResultList = res.result.resultList;
									} else {
									}
								});
							} else {
							}
						});
					})
					.catch(() => {
						// on cancel
					});
			} else {
				this.$toast('您还没有浏览过商品哦~');
			}
		},
	},
	computed: {
		...mapState(['themes']),
	},
	components: {
		Noempty
	}
};
</script>

<style src="../../assets/css/style/my-style.css" scoped></style>
<style src="../../assets/css/collect.css" scoped></style>
<style scoped>
header .header-box .header-search {
	margin: 7px 10px;
	height: 30px;
}
</style>
